<template>
	<div>
		<van-nav-bar fixed title="申请调拨" left-arrow class="bg-primary color-white" @click-left="$utils.back($route.path)" />
		<div class="has-top has-bottom" style="height:100vh">
			<div class="bg-primary pd-20">
				<div class="bg-white mg-20 br-20 pd-20">
					<div class="callout">
						<div class="title">库存类型：</div>
						<div class="callbg">
							<select v-model="selectValue" class="apply-select">
								<option v-for="(item, index) in option1" :value="item.value">{{ item.text }}</option>
							</select>
							<svg-icon icon-class="right" class="right-icon fs-30" />
						</div>
					</div>

					<div class="callout">
						<div class="title">调出方：</div>
						<div @click="openPop" class="callbg">
							<input v-model="outStoreName" class="apply-select" />
							<svg-icon icon-class="right" class="right-icon fs-30" @goPage="openPop" />
						</div>
					</div>
				</div>

			</div>

			<!-- 搜索栏 -->
			<top-search type="primary" :val="val" :area-show="areaShow" :input-style="inputStyle" @search="search" />
			<!-- 商品分类及列表栏 -->
			<div class="flex list-content mt-20">
				<!-- 商品分类 -->
				<div class="flex-s-0 scoll-y">
					<tree :tree-data="classifyList" :active-id="activeId" @treeClickEvent="treeClickEvent" />
				</div>
				<!-- 商品列表 -->
				<div id="scrollBox" ref="scrollBox" class=" bg-f9 flex-1 scoll-y">
					<li v-for="(item, index) in productList" :key="index" class="bg-white productItem">
						<div class="flex">
							<img-box class="is-130 br-10 flex-s-0" :img-url="item.ThumbnailUrl410" />
							<div class="productItem-detail ml-20 flex-1">
								<p class="text-show-line-2 fs-28 fw-b">{{ item.ProductName }}</p>
								<p v-show="!item.ProductSkuAttrList && item.ProductSkuList && item.ProductSkuList[0].AttributeNameValue"
									class="color-gray-light fs-20 mt-10">
									{{ item.ProductSkuList[0].AttributeNameValue }}
								</p>
								<p v-if="(item.UnitList && item.UnitList.length > 1) || (item.ProductSkuList && item.ProductSkuList.length > 1)"
									class="color-gray-light fs-20 mt-10">
									<span v-if="item.ProductSkuList && item.ProductSkuList.length > 1">{{ item.ProductSkuList.length }}个规格
										可选</span>
								</p>
								<p v-if="item.SaleStatus != 0" class="color-primary fs-32 mt-10 fw-b left-money">{{ item.V_GradePrice
								}}<span class="color-gray-light fs-20 fw-500"> / {{ item.BaseUnit ? item.BaseUnit : item.Unit }}</span>
								</p>
								<div v-if="item.SaleStatus == 1">
									<!-- 单规格加购 -->
									<div
										v-show="item.ProductSkuAttrList && item.ProductSkuAttrList.length <= 1 && !item.UnitList && item.IsFutures !== 3"
										class="productItem-p-right flex-fe-c">
										<svg-icon v-show="item.Amount > 0" icon-class="delete-3" class="color-primary fs-42"
											:class="item.Amount <= 0 ? 'opacity-1' : ''" @goPage="changeAmount(item, item.Amount, -1)" />
										<div v-show="item.Amount > 0" class="btn-input-box">
											<input v-model="item.Amount" type="number" class="btn-input"
												@blur="changeAmount(item, item.Amount, 0)" @click.stop>
										</div>
										<svg-icon icon-class="add-1" class="color-primary fs-42"
											@goPage="changeAmount(item, item.Amount, 1)" />
									</div>
									<!-- 服务商品单规格显示弹窗 -->
									<div
										v-show="item.ProductSkuAttrList && item.ProductSkuAttrList.length <= 1 && !item.UnitList && item.IsFutures === 3"
										class="productItem-p-right flex-fe-c">
										<svg-icon icon-class="add-1" class="color-primary fs-42" @goPage="showSpec(item, index)" />
									</div>
									<!-- 多规格加购 -->
									<div v-show="(item.ProductSkuAttrList && item.ProductSkuAttrList.length > 1) || item.UnitList"
										class="productItem-p-right flex-fe-c">
										<svg-icon icon-class="add-1" class="color-primary fs-42" @goPage="showSpec(item, index)" />
									</div>
								</div>
							</div>
						</div>
					</li>
					<no-data v-if="productList.length === 0" />
					<p v-if="end === true && productList.length !== 0" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>
				</div>
			</div>
			<div class="fixed-bottom">
				<div class="flex-fe-c bottom-box pr-250 pl-150">
					<div class="bg-white pos-a is-92 shop-cart-out">
						<div class="shop-cart-in pos-a bg-primary is-80 flex-center">
							<svg-icon icon-class="car-new" class="color-white fs-40" @goPage="showCartList" />
							<div class="pos-a shop-cart-num">{{ totalAmount }}</div>
						</div>
					</div>
					<p class="fs-28">累计金额：<span class="color-primary"><b class="fs-36">{{ totalMoney }}</b>元</span></p>
					<button class=" bg-primary color-white btn fs-28" @click="submitBuy">下一步</button>
				</div>
			</div>
		</div>

		<!-- 底部栏购物车 -->

		<div v-show="showList" class="cart-popup">
			<div class="cart-shadow" @click.stop="hiddenCartList" />
			<div class="cart-list-box">
				<div class="cart-tle flex-s-c color-gray-light fs-26">
					<p>共<span class="color-primary">{{ totalAmount }}</span>件商品</p>
					<p class="flex-center" @click="cleanCart">
						<svg-icon icon-class="clean" class="pr-10 fs-40" />
						<span>清空购物车</span>
					</p>
				</div>
				<ul class="plr-25 cart-list">
					<li v-for="(item, index) in cartList" :key="index" class="cart-item flex-s-c hb">
						<p class="text-show-line-2 flex-1">{{ item.ProductName }}</p>
						<div class="flex-s-0 ml-50 cart-spec">
							<p class="color-primary">￥{{ parseFloat(Number(item.Price).toFixed(2)) }} </p>
							<p class="color-gray-light" v-if="item.V_AttributeNameValue">{{ item.V_AttributeNameValue.slice(0, -1) }}
							</p>
						</div>
						<div class="flex-fe-c flex-s-0 ml-50">
							<svg-icon icon-class="delete-3" class="color-primary fs-42 " :class="item.Amount <= 0 ? 'opacity-1' : ''"
								@goPage="changeCartAmount(item, item.Amount, -1)" />
							<div class="btn-input-box">
								<input v-model="item.Amount" type="number" class="btn-input"
									@blur="changeCartAmount(item, item.Amount, 0)">
							</div>
							<svg-icon icon-class="add-1" class="color-primary fs-42" @goPage="changeCartAmount(item, item.Amount, 1)" />
						</div>
					</li>
				</ul>
			</div>
		</div>

		<!-- 商品规格选择弹窗 -->
		<van-popup v-model="optPopup.show" position="bottom" class="bottom-popup">
			<!--<ProductSpec v-show="optPopup.type==='attr'" :data="optPopup.data" :fresh="optPopup.change" :popup-type="optPopup.type" @closePopup="closePopup" @addCart="addCart" />-->
			<specTree v-if="optPopup.show" :data="optPopup.data" :fresh="optPopup.change" :Source="0" :switch85="switch85"
				:switch203="switch203" :switch7="switch7" :popup-type="optPopup.type" @closePopup="closePopup"
				@addCart="addCart" />
		</van-popup>

		<!-- 选择调出方弹窗 -->
		<van-popup v-model="rightPopupShow" position="right" class="right-popup">
			<div class="pop-content">
				<van-nav-bar fixed title="选择调出方" left-arrow @click-left="chooseUser" />
				<div class="has-top">
					<div class="bg-white flex-v-c pos-s">
						<van-field v-model="searchKey" class="flex-1" clearable placeholder="门店名称/会员编号/手机号码" left-icon="search"
							@click-left-icon="search" @keyup.enter="searchUser" />
						<div class="pos-a right-40 fs-26" @click="searchUser">搜索</div>
					</div>
					<van-list v-if="userList && userList.length > 0" class="bg-white mg-24 br-8" :immediate-check="false">
						<div v-for="(item, index) in userList" :key="index" class="flex pd-20 userList" @click="chooseUser(item)">
							<div class="avar mr-20">
								<img-box class="classImg" :isBr50="isBr50" :img-url="item.Logo" />
							</div>
							<div class="flex-d-c flex-s-fs">
								<div class="flex-v-c">
									<div class="fw-b fs-28">{{ item.Name }}</div>
								</div>
								<div class="color-gray-light">{{ item.ContactTel }}</div>
							</div>
						</div>
					</van-list>

				</div>
			</div>
		</van-popup>
		<van-dialog v-model="transferApply" title="是否确认调拨" show-cancel-button @confirm="submitStockTransferApply"
			@cancel="cancelStockTransferApply">
			<div class="ptb-20 plr-30 shangchuan">
				<div class="w-200 mg-20">打款凭证</div>
				<van-cell>
					<van-uploader accept="image/*" capture='camera' slot="title" v-model="imageSrc" class="advertPictures"
						:after-read="(file) => { afterRead(file, 'imageSrc') }" preview-size="2rem"
						@delete="(file, detail) => { afterDelete(file, detail, 'imageSrc') }" />
				</van-cell>
			</div>
		</van-dialog>
		<van-popup v-model="showTips" :close-on-click-overlay="isclose" class="services">
			<div class="unartificer">
				<div class="fs-28 tac">您没有操作权限</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
import TopSearch from 'components/Search'
import noData from 'components/noData'
import productList from 'components/allocation/index'
import peoductDetail from 'components/productDetail'
import ProductSpec from 'components/productDetail/spec'
import tree from 'components/productList/tree'
import { GetProductTypeTree, GetWholeSaleListForSku, GetStockTransferSetting, SubmitStockTransferApply } from 'api/product'
import { GetBusinessFunction } from 'api/businessSetting'
import { GetStorePage } from 'api/store'
import specTree from 'components/allocation/specTree'
import imgBox from 'components/imgBox'
import { upLoad } from 'api/upload'
export default {
	components: {
		TopSearch,
		noData,
		productList,
		peoductDetail,
		ProductSpec,
		tree,
		specTree,
		imgBox
	},
	data() {
		return {
			// 搜索栏配置及数据
			areaShow: false,
			val: '',
			inputStyle: 'inputStyle-1',

			// tab
			activeTabIndex: 0,

			// 筛选栏配置及数据
			filterIndex: -1,
			filterPopShow: false,
			brandList: [], // 品牌列表
			newBrandList: [],
			oldBrandIds: '',
			newBrandIds: '',
			tagList: [], // 标签列表
			newTagList: [],
			displayData: {}, // 整体显示设置
			priceDecimalPlaces: 2,
			oldTagIds: '',
			newTagIds: '',
			sortActiveIndex: 0,

			// 分类栏配置及数据
			activeId: -1,
			classifyList: [],
			initClassify: true, // 是否需要初始化分类

			// 商品列表
			productList: [],
			updateList: true, // 是否需要更新商品列表

			// 购物车数据
			carList: [],

			// 商品详情
			detailData: {},
			oldID: 0,

			detailIndex: -1,
			SpecIndex: -1,

			// 评价数据
			evaluateData: {},

			// 收货地址
			addressList: [],

			// sku 商品规格弹窗
			optPopup: {
				data: {},
				type: '',
				change: false,
				show: false
			},

			cartRequestList: [],

			// 滚动状态
			totalAmout: 0,
			scollRequest: true,
			scollTop: 0,
			end: false,

			// 请求参数
			requestData: {
				ProductType: 1,
				OrderBy: 'AddTime',
				sort: 'desc',
				PageIndex: 1,
				PageSize: 10,
				NoFutures: '3,7',
			},

			commentRequest: {
				page: 1,
				size: 3
			},
			switch203: 0,
			switch85: 0,
			switch7: 0, // 微商下单不限制库存
			//右侧弹窗
			rightPopupShow: false,
			searchKey: '', //搜索用户关键词
			isBr50: true, //用来判断图片圆形
			userList: [],
			option1: [],
			showList: false,
			cartList: [],
			totalMoney: 0,
			totalAmount: 0,
			cartRequestList: [],
			selectValue: '',
			outStoreId: 0,
			transferApply: false, //调拨上传凭证弹窗
			pageData: {
				imageSrc: [],
			},
			imageSrc: [],
			outStoreName: '',
			showTips: false,
			isclose: false,
		}
	},
	created() {
		this.GetStockTransferSetting()
		this.GetProductTypeTree()
		this.GetBusinessFunction()
	},
	watch: {
		cartList(newVal, oldVal) {
			this.cartList = newVal
			this.totalMoney = this.getTotalMoney()
			this.totalAmount = this.getTotalAmount()
		}
	},
	mounted() {
		this.$nextTick(function () {
			document.querySelector('#scrollBox').addEventListener('scroll', this.onScroll)
		})
	},
	methods: {
		GetStockTransferSetting() {
			GetStockTransferSetting().then(res => {
				if (res.Data) {
					this.requestData.productLineIds = res.Data.StoreProductLineIds
					if (res.Data.StockMode) {
						const ck = res.Data.StockMode
						if (ck === '0') {
							this.option1 = [{ text: '实物库存', value: 0 }]
						} else if (ck === '1') {
							this.option1 = [{ text: '云仓库存', value: 1 }]
						} else {
							this.option1 = [{ text: '实物库存', value: 0 }, { text: '云仓库存', value: 1 }]
						}
					}
				} else {
					this.showTips = true
				}
			})
		},
		GetBusinessFunction() {
			GetBusinessFunction(203).then(res => {
				if (res) {
					this.switch203 = res.Data[0].Value;
				}
			})
			GetBusinessFunction(85).then(res => {
				if (res) {
					this.switch85 = res.Data[0].Value;
				}
			})
			GetBusinessFunction(7).then(res => {
				if (res) {
					this.switch7 = res.Data[0].Value;
				}
			})
		},
		// 关键字搜索商品
		search(key) {
			console.log(key)
			this.resetParams()
			this.requestData.search = key
			this.GetWholeSaleListForSku()
		},
		//搜索用户
		searchUser() {
			if (this.searchKey != '') {
				this.GetStorePage()
			}

		},
		GetStorePage() {
			const param = {}
			param.name = this.searchKey
			GetStorePage(param).then(res => {
				if (res.Data) {
					this.userList = res.Data
				}
			})
		},

		openPop() {
			this.rightPopupShow = true
		},
		chooseUser(item) {
			console.log(item, "选择用户")
			this.rightPopupShow = false
			this.searchKey = ''
			if (item.ID) {
				this.outStoreId = item.ID
				this.outStoreName = item.Name
			}
		},

		// 加减
		changeAmount(item, num, type) {
			if (type === 1) {
				item.Amount += 1
			} else if (type === -1) {
				item.Amount -= 1
			} else {
				item.Amount = num
			}

			console.log(item, this.cartList, "改变")
			if (this.cartList) {
				this.cartList.forEach((ele) => {
					if (item.SkuId === ele.SkuId) {
						this.cartList.splice(this.cartList.indexOf(ele), 1)
					}
					if (item.ProductSkuList && item.ProductSkuList[0].ID === ele.SkuId) {
						this.cartList.splice(this.cartList.indexOf(ele), 1)
					}
				})
			}
			const obj = {}
			obj.ProductName = item.ProductName
			if (!item.SkuId) {
				obj.ProductId = item.ID
				obj.SkuId = item.ProductSkuList[0].ID
				obj.Amount = item.Amount
				obj.Price = item.V_GradePrice
				obj.TotalMoney = item.Amount * item.V_GradePrice
			} else {
				obj.ProductId = item.ProductId
				obj.SkuId = item.SkuId
				obj.Amount = item.Amount
				obj.Price = item.Price
				obj.TotalMoney = item.Amount * item.Price
			}
			if (item.Amount > 0) {
				this.cartList.push(obj)
			}
		},
		changeCartAmount(item, num, type) {

			if (type === 1) {
				item.Amount += 1
			} else if (type === -1) {
				item.Amount -= 1
			} else {
				item.Amount = num
			}
			item.TotalMoney = item.Amount * item.Price
			if (this.cartList) {
				this.cartList.forEach((ele) => {
					if (ele.Amount === 0) {
						this.cartList.splice(this.cartList.indexOf(ele), 1)
					}
				})
			}
			this.totalMoney = this.getTotalMoney()
			this.totalAmount = this.getTotalAmount()
			this.productList.forEach((ele) => {
				if (ele.ID === item.ProductId) {
					ele.Amount = item.Amount
					if (ele.ProductSkuAttrList.length === 1) {
						ele.ProductSkuAttrList[0].SkuList[0].Amount = item.Amount
					} else {
						ele.ProductSkuAttrNewList.forEach((e) => {
							if (e.ProductAttrList.length == 0 && e.SkuModel.SkuId == item.SkuId) {
								e.Amount = item.Amount
							} else if (e.ProductAttrList.length > 0) {
								e.ProductAttrList.forEach((i) => {
									if (i.ProductAttrList.length == 0 && i.SkuModel.SkuId == item.SkuId) {
										i.Amount = item.Amount
									} else if (i.ProductAttrList.length > 0) {
										i.ProductAttrList.forEach((t) => {
											if (t.ProductAttrList.length == 0 && t.SkuModel.SkuId == item.SkuId) {
												t.Amount = item.Amount
											}
										})
									}
								})
							}
						})
					}
				}
			})
		},
		// 计算总额
		getTotalMoney() {
			let totalMoney = 0
			this.cartList.forEach(item => {
				totalMoney += item.TotalMoney
			})
			return totalMoney.toFixed(2)
		},

		// 计算总数量
		getTotalAmount() {
			let totalAmount = 0
			this.cartList.forEach(item => {
				totalAmount += parseInt(item.Amount)
			})
			return totalAmount
		},
		// 重置请求参数及数据
		resetParams() {
			this.requestData.PageIndex = 1
			this.requestData.PageSize = 10
			this.scollRequest = true
			this.scollTop = 0
			this.end = false
			this.productList = []
		},
		// 点击分类事件
		treeClickEvent(item, treeItem) {
			if (this.activeId !== item.id) {
				this.activeId = item.id
				this.resetParams()
				this.requestData.typePath = item.parent_path
				this.GetWholeSaleListForSku()
			}
		},

		closeFilterPop() {
			this.filterPopShow = false
			this.filterIndex = -1
		},
		// 列表checked
		setChecked(arr, bool = false) {
			if (arr && arr.length > 0) {
				arr.forEach(item => {
					item.checked = bool
				})
			}
		},
		showCartList() {
			this.showList = !this.showList
		},
		hiddenCartList() {
			this.showList = false
		},

		updateNum(a1, a2, num) {
			if (a2.ProductSkuAttrNewList && a2.ProductSkuAttrNewList.length > 0) {
				for (var i = 0; i < a2.ProductSkuAttrNewList.length; i++) {
					this.updateNum(a1, a2.ProductSkuAttrNewList[i].ProductAttrList)
				}
			} else {
				//a2.forEach(obj => {
				//	if (obj.ProductAttrList && obj.ProductAttrList.length > 0) {
				//		console.log(obj)
				//		this.updateNum(a1, obj.ProductAttrList); // 递归处理下一级
				//	} else {
				//		const matchedItem = a1.find(item => item.SkuId === obj.SkuModel.SkuId);
				//		console.log(matchedItem,obj.SkuModel.SkuId)
				//		if (matchedItem) {
				//			obj.Amount = matchedItem.Amount;
				//			this.$forceUpdate()
				//			console.log(a2,'打印修改')
				//		}
				//	}
				//});
				a2.forEach(function (item, index, array) {
					if (array[index].ProductAttrList && array[index].ProductAttrList.length > 0) {
						console.log(obj)
						this.updateNum(a1, array[index].ProductAttrList); // 递归处理下一级
					} else {
						const matchedItem = a1.find(m => m.SkuId === array[index].SkuModel.SkuId);
						console.log(matchedItem)
						if (matchedItem) {
							array[index].Amount = matchedItem.Amount;

							console.log(array, '打印修改', array[index].Amount)
						}
					}
				});
				console.log(a2, "a222")
				//return a2
			}
		},
		replaceAmount(data, skuId, newAmount) {
			console.log(data, skuId, newAmount, "dddd");
			// 遍历ProductAttrList
			if (data.ProductAttrList && data.ProductAttrList.length > 0) {
				for (var i = 0; i < data.ProductAttrList.length; i++) {
					let attr = data.ProductAttrList[i];
					if (Array.isArray(attr.ProductAttrList)) {
						this.replaceAmount(attr.ProductAttrList, skuId, newAmount);
					} else if (attr.SkuModel.SkuId === skuId) {
						attr.Amount = newAmount;
					}
				}

			};
		},
		showSpec(item, index) {
			if (this.cartList.length > 0 && item.ProductSkuAttrNewList.length > 0) {
				for (var c = 0; c < this.cartList.length; c++) {
					for (var m = 0; m < item.ProductSkuAttrNewList.length; m++) {
						let a1 = item.ProductSkuAttrNewList[m]
						console.log(a1, "a1111")
						if (a1.ProductAttrList.length > 0) {
							let a2 = a1.ProductAttrList
							for (var i = 0; i < a2.length; i++) {
								if (a2[i].ProductAttrList.length > 0) {
									const a3 = a2[i].ProductAttrList
									for (var t = 0; t < a3.length; t++) {
										if (a3[t].ProductAttrList.length == 0 && a3[t].SkuModel.SkuId == this.cartList[c].SkuId) {
											a3[t].Amount = this.cartList[c].Amount
											console.log(a3, "3333")
										}
									}
								} else if (a2[i].ProductAttrList.length == 0 && a2[i].SkuModel.SkuId == this.cartList[c].SkuId) {
									a2[i].Amount = this.cartList[c].Amount
									console.log("22222", a1, a2[i].Amount)
								}
							}
						} else if (a1.ProductAttrList.length == 0 && a1.SkuModel.SkuId == this.cartList[c].SkuId) {
							a1.Amount = this.cartList[c].Amount
						}
					}
				}
			}
			console.log(item, this.cartList, "贵庚")
			this.SpecIndex = index
			this.optPopup.type = 'attr'
			this.optPopup.data = item
			this.optPopup.show = true
		},



		// 规格弹窗组件方法
		addCart(arr) {
			console.log(arr)
			this.cartRequestList = arr
			if (this.cartRequestList.length <= 0) {
				this.$toast.fail('请选择商品')
				return
			}
			this.cartList = [...new Set([...this.cartRequestList, ...this.cartList].map(item => item.SkuId))].map(SkuId => {
				return this.cartRequestList.find(a => a.SkuId === SkuId) || this.cartList.find(a => a.SkuId === SkuId)
			});
		},
		closePopup() {
			this.optPopup.show = false
		},
		searchAdress() { },
		submitBuy() {
			if (this.selectValue === '') {
				this.$toast.fail('请选择调拨库存类型')
				return
			}
			if (this.cartList.length <= 0) {
				this.$toast.fail('请选择商品')
				return
			}
			if (this.outStoreId === 0) {
				this.$toast.fail('请选择调拨方')
				return
			}
			this.transferApply = true
		},
		submitStockTransferApply() {
			if (this.imageSrc.length === 0) {
				this.$toast('请上传视频或图片')
				return
			}
			const _param = {}
			_param.applyImages = this.pageData.imageSrc.toString()
			_param.stockMode = this.selectValue
			_param.outStoreId = this.outStoreId
			_param.detailList = this.cartList
			SubmitStockTransferApply(_param).then(res => {
				if (res.Data) {
					this.$router.push('/allocationrecord')
				} else {
					this.$toast(res.Msg)
				}
			})
			this.transferApply = false
		},
		cancelStockTransferApply() {
			this.transferApply = false
		},
		// 底部购物车组件方法
		cleanCart() {
			this.cartList = []
			this.optPopup.change = !this.optPopup.change
			this.changeArr(this.productList, false)
		},

		// 整理数据
		changeArr(Arr, isNew) {
			const _this = this
			console.log(this)
			Arr.forEach(item => {
				// 图片列表
				if (item.ImageUrl) {
					const ImgUrlList = _this.$utils.strToArr(item.ImageUrl)
					item.logo = ImgUrlList[0]
				}
				item.BaseUnit = item.DefaultUnit
				// 单位列表
				if (item.Unit && item.Unit.indexOf(',') !== -1) {
					item.UnitList = item.Unit.split(',')
					item.BaseUnit = item.UnitList[0]
				}


				// 购物车数量（同步）
				if (_this.cartList && _this.cartList.length > 0) {
					const _list = _this.cartList
					for (let i = 0; i < _list.length; i++) {
						if (_list[i].ProductId === item.ID) { // 判断购物车中的商品是否为当前商品
							if (item.ProductSkuAttrList && item.ProductSkuAttrList.length > 1) { // 多规格商品
								for (let j = 0; j < item.ProductSkuAttrList.length; j++) {
									if (item.ProductSkuAttrList[j].SkuList && item.ProductSkuAttrList[j].SkuList.length > 0) {
										for (let k = 0; k < item.ProductSkuAttrList[j].SkuList.length; k++) {
											if (_list[i].SkuId === item.ProductSkuAttrList[j].SkuList[k].ID) {
												item.ProductSkuAttrList[j].SkuList[k].Amount = _list[i].Amount
												console.log('匹配成功')
												break
											}
										}
									}
								}
							} else { // 单规格商品
								console.log('同步单规格')
								item.Amount = _list[i].Amount
								break
							}
						} else {
							item.Amount = 0
						}
					}
				} else {
					item.Amount = 0
					if (item.ProductSkuAttrList && item.ProductSkuAttrList.length > 0) { // 多规格商品
						for (let j = 0; j < item.ProductSkuAttrList.length; j++) {
							if (item.ProductSkuAttrList[j].SkuList && item.ProductSkuAttrList[j].SkuList.length > 0) {
								for (let k = 0; k < item.ProductSkuAttrList[j].SkuList.length; k++) {
									item.ProductSkuAttrList[j].SkuList[k].Amount = 0
								}
							}
						}
					}
				}
				if (isNew) {
					_this.productList.push(item)
				}
			})
		},

		// 滚动事件触发下拉加载
		onScroll() {
			const _this = this
			if (_this.scollRequest === true) {
				if (this.$utils.getScrollHeight('scrollBox') - this.$utils.getClientHeight('scrollBox') - this.$utils.getScrollTop('scrollBox') <= 5) {
					_this.scollRequest = false
					// alert('触发！！！')
					console.log('加载')
					_this.scollTop = this.$utils.getScrollTop('scrollBox')
					if (_this.requestData.PageIndex < _this.totalAmout) {
						_this.requestData.PageIndex++
						_this.GetWholeSaleListForSku()
					} else {
						console.log('end')
						_this.end = true
					}
					// }
				}
			}
		},

		// 获取门店商品分类列表
		GetProductTypeTree() {
			GetProductTypeTree({ parent_path: '_0_2_', InfoType: 1 }).then((res) => {
				if (res) {
					this.initClassify = false
					this.classifyList = []
					const totalClassify = {
						OrderBy: res.Data.OrderBy,
						id: res.Data.id,
						name: res.Data.name,
						parent_id: res.Data.parent_id,
						parent_path: res.Data.parent_path,
						type_id: res.Data.type_id
					}
					this.classifyList.push(totalClassify)
					if (res.Data.children && res.Data.children.length > 0) {
						res.Data.children.forEach((item) => {
							this.classifyList.push(item)
						})
					}
					this.activeId = res.Data.id
					this.requestData.typePath = res.Data.parent_path
					this.productList = []
					this.GetWholeSaleListForSku()
				}
			})
		},

		// 获取商品列表
		GetWholeSaleListForSku() {
			const _this = this
			GetWholeSaleListForSku(_this.requestData).then(res => {
				if (res) {
					if (res.Data.Data.length && res.Data.Data.length > 0) {
						console.log(_this.cartList)
						console.log(res.Data.Data)
						this.changeArr(res.Data.Data, true)
						_this.totalAmout = res.Data.TotalAmout
						_this.scollRequest = true
						if (_this.scollTop > 0) {
							_this.$refs.scrollBox.scrollTo(0, _this.scollTop)
						}
					}
				}
			})
		},
		afterRead(file, type) {
			upLoad({
				Content: this.$utils.getCaption(file.content, 'base64,'),
				FileType: this.$utils.getCaption(file.file.type, '/')
			}).then(res => {
				if (res) {
					this.pageData.imageSrc.push(res.Data.Path)
				}
			})
		},
		afterDelete(file, detail, type) {
			this.pageData.imageSrc.splice(detail.index, 1)
		},

	}
}
</script>
<style lang="scss" scoped>
.color-white {
	/deep/.van-icon {
		color: #fff;
	}

	/deep/.van-nav-bar__title {
		color: #fff;
	}
}

.list-content {
	height: calc(100% - 170px);
}

// 以上修整完成
.scoll-y {
	overflow-y: scroll;
}

.classifyItem {
	width: 200px;
}

.activeIndex {
	background: $colorF;
	position: relative;

	&:before {
		content: '';
		height: calc(100% - 40px);
		width: 8px;
		@include bg-primary();
		position: absolute;
		top: 20px;
		left: 0;
		border-radius: 0 8px 8px 0;
	}
}

.van-popup {
	background: transparent;
}

.detail-page {
	background: $colorF5;
}

.tab-bar {
	display: flex;

	flex-direction: row;
	background: $colorF;
	padding: 20px 0;

	.tab-item {
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.teb-item-text {
			display: flex;
			font-size: 26px;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.teb-item-border {
			display: flex;
			width: 80px;
			height: 6px;
			border-radius: 3px;
			background: rgba($color: #000000, $alpha: 0);
		}
	}

	.activeBorder {
		.teb-item-text {
			@include color-primary;
		}

		.teb-item-border {
			@include bg-primary();
		}
	}
}

.filter-tab {
	display: flex;
	flex-direction: row;
	position: relative;
	padding: 10px 24px 20px;

	.filter-item {
		display: flex;
		flex-grow: 0;
		flex-shrink: 0;
		width: calc(33% - 15px);
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		height: 54px;
		background: $colorF4;
		border: solid 1px $colorF4;
	}

	.filter-checked {
		@include color-primary;
		background: $colorF;
		@include border-primary;
	}

	.filter-active {
		background: transparent;
		color: #000 !important;
		position: relative;
		@include border-primary;

		&:after {
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			@include color-primary;
			@include bg-primary;
			opacity: 0.1;
			border-radius: 10px;
		}
	}

	.change-theme {
		background: $colorF;
		border: solid 1px #171817;
	}

	.filter-pop {
		position: absolute;
		z-index: $zIndexPopup;
		top: 84px;
		left: 0;
		width: 100%;
		height: calc(100vh - 370px);

		.filter-cover {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			background: $colorOverlay;
		}

		.filter-pop-content {
			position: relative;
			background: $colorF;

			.filter-pop-item-box {
				padding: 40px 24px 50px;
				position: relative;
				display: flex;
				flex-wrap: wrap;

				.filter-pop-item {
					flex-shrink: 0;
					flex-grow: 0;
					position: relative;
					width: calc(33.33% - 14px);
					margin-right: 20px;
					margin-bottom: 20px;
					text-align: center;
					line-height: 72px;
					padding: 0 20px;
					background: $colorF4;
					border: solid 1px $colorF4;
					border-radius: 6px;

					&:nth-child(3n) {
						margin-right: 0px;
					}
				}

				.filter-selected {
					@include color-primary;
					border-color: currentColor;

					&:before,
					&:after {
						content: '';
						position: absolute;
					}

					&:before {
						background: currentColor;
						width: 54px;
						height: 54px;
						border-radius: 100%;
						bottom: -27px;
						right: -27px;
					}

					&:after {
						width: 6px;
						height: 12px;
						border: 5px solid;
						border-color: transparent $colorF $colorF transparent;
						transform: rotate(45deg);
						bottom: 6px;
						right: 4px;
					}
				}
			}

			.filter-pop-item-box-1 {
				padding: 30px 24px 40px;
				font-size: 26px;

				.filter-pop-item-1 {
					padding: 30px 0;
				}

				.item-checked {
					position: relative;
					@include color-primary;

					&:after {
						content: '';
						position: absolute;
						width: 6px;
						height: 18px;
						border: 5px solid;
						border-color: transparent currentColor currentColor transparent;
						transform: rotate(45deg);
						bottom: 40px;
						right: 10px;
					}
				}
			}

			.filter-bottom {
				padding: 32px 24px;
				position: relative;

				.btn {
					width: calc(50% - 20px);
					line-height: 72px;
					border-radius: 8px;
				}
			}
		}
	}
}

.zIndexBottom {
	z-index: $zIndexHeader;
}

.list-item {
	flex: 1;
	font-size: 24px;
	line-height: 70px;
}

.list-item-active {
	background: $colorF;
	position: relative;

	&:before {
		content: '';
		position: absolute;
		width: 40px;
		height: 4px;
		bottom: 10px;
		left: calc(50% - 20px);
		@include bg-primary;
		border-radius: 2px;
	}
}

.left-active {
	border-top-right-radius: 10px;

	&:after {
		content: '';
		position: absolute;
		right: -26px;
		top: 0;
		width: 0;
		height: 0;
		border-right: 30px solid transparent;
		border-bottom: 70px solid $colorF;
	}
}

.right-active {
	border-top-left-radius: 10px;

	&:after {
		content: '';
		position: absolute;
		left: -26px;
		top: 0;
		width: 0;
		height: 0;
		border-left: 30px solid transparent;
		border-bottom: 70px solid $colorF;
	}
}

.productItem {
	padding: 32px 22px;
	position: relative;
	z-index: 1;

	&:not(:last-child) {
		margin-bottom: 2px;
	}

	.right-arrow {
		position: relative;

		&:after {
			content: '';
			position: absolute;
			top: 40px;
			right: 0;
			width: 20px;
			height: 20px;
			border: 2px solid;
			border-color: $colorC $colorC transparent transparent;
			transform: rotate(45deg);
		}
	}

	.item-store {
		width: 170px;
		margin-right: 40px;

		.item-store-btn {
			position: relative;
			margin: 20px auto 0;
			font-size: 20px;
			line-height: 34px;
			border-radius: 17px;
			padding: 0 30px 0 20px;
			@include color-primary;
			display: inline-block;
			border: 1px solid currentColor;

			&:after {
				content: '';
				position: absolute;
				top: 8px;
				right: 15px;
				width: 10px;
				height: 10px;
				border: 2px solid;
				border-color: currentColor currentColor transparent transparent;
				transform: rotate(45deg);
			}
		}
	}

	.item-product {
		margin-right: 10px;
		display: none;

		&:first-child,
		&:nth-child(2) {
			display: block;
		}
	}
}

.productItem-1 {
	padding: 0 22px;
	margin-top: 32px;
}

.sortable-chosen {
	box-shadow: 0 0 20px #ccc;
	z-index: 2;
	margin: 0 4px;
}

.left-money {
	padding-left: 16px;
	position: relative;

	&:before {
		content: '￥';
		position: absolute;
		bottom: 4px;
		font-size: 24px;
		font-weight: 500;
		left: -4px;
	}
}

.productItem-detail {
	padding-bottom: 50px;
	position: relative;

	.productItem-p-left {
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.productItem-p-right {
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.tel-text {
		color: $colorF;
		@include bg-primary;
		padding: 10px 20px;
		border-radius: 28px;
	}

	.select-box {
		display: inline-block;
		position: relative;
		padding: 0 36px 0 13px;
		line-height: 30px;
		font-size: 20px;
		border-radius: 15px;
		border: 1px solid currentColor;

		&:after {
			content: '';
			position: absolute;
			width: 10px;
			height: 10px;
			top: 5px;
			right: 10px;
			border: 1px solid;
			border-color: transparent currentColor currentColor transparent;
			transform: rotate(45deg);
		}

		.select-item-box {
			position: absolute;
			left: 0;
			color: $color3;
			width: auto;
			background: rgba(0, 0, 0, 0.1);
			z-index: 100;

			p {
				padding-left: 13px;
			}
		}
	}
}

.upDown-box {
	position: absolute;
	bottom: 32px;
	right: 22px;
	width: 110px;
	height: 40px;

	.up {
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.down {
		position: absolute;
		right: 0;
		bottom: 0;
	}
}

.btn-input-box {
	position: relative;
	margin: 0 4px;

	&:before {
		background: transparent;
	}

	.btn-input {
		position: relative;
		z-index: 1;
		height: 42px;
		width: 50px;
		line-height: 1;
		border: none;
		text-align: center;
	}
}

.bottom-popup {
	border-radius: 40px 40px 0 0;
}

.right-popup {
	width: 100%;
	height: 100vh;

	.pop-content {
		position: relative;
		height: 100%;
		width: 100%;
		overflow: scroll;
		padding-bottom: 100px;
		background: #f5f5f5;

		.gray-line {
			height: 12px;
			background: #F6F6F6;
		}

		.popup-input {
			text-align: center;
			font-size: 28px;
			background: #F2F3FC;
			border-radius: 16px;
		}

		.bottom-box {
			position: fixed;
			bottom: 0;
			width: 100%;
			background: #fff;
		}
	}
}

.pos-s {
	height: 64px;
	background: #FFFFFF;
	border-radius: 41px;
	margin: 24px;
	padding: 0 10px;
}

.van-cell {
	padding: 0 45px 0 12px;
}

.van-cell::after {
	border-bottom: none
}

.avar {
	width: 144px;
	height: 144px;
	border-radius: 50%;
}

.userList {
	border-bottom: 1px solid #f5f5f5;
}

.level {
	margin-left: 20px;
	background: #ff9500;
	width: 100px;
	text-align: center;
	color: #fff;
	border-top-left-radius: 20px;
	border-bottom-right-radius: 20px;
	height: 35px;
	line-height: 35px;
}

.callout {
	display: flex;
	align-items: center;
	font-size: 26px;
	text-align: center;
	margin-top: 20px;
}

.title {
	width: 140px;
	text-align: justify;
	text-justify: inter-ideograph;
	text-align-last: justify;
}

.apply-select {
	width: 100%;
	height: 70px;
	line-height: 70px;
	border: none;
	background: none;
	appearance: none;
	padding: 0 20px;
	position: absolute;
	top: 0;
	left: 0;
}

.callbg {
	background: #f4f4f4;
	border-radius: 10px;
	height: 70px;
	line-height: 70px;
	width: calc(100% - 140px);
	position: relative;
}

.right-icon {
	position: absolute;
	right: 15px;
	top: 20px;
}

.bottom-box {
	position: relative;
	background: $colorF;
	height: 130px;
	z-index: 2;

	.shop-cart-out {
		border-radius: 100%;
		left: 54px;
		top: -20px;
		overflow: visible;

		.shop-cart-in {
			border-radius: 100%;
			left: 6px;
			top: 6px;
			overflow: visible;

			.shop-cart-num {
				font-size: 22px;
				line-height: 30px;
				padding: 0 10px;
				border-radius: 15px;
				color: $colorF;
				background: $red;
				top: 0;
				left: 60px;
				z-index: 12;
			}
		}
	}

	.shop-cart-out2 {
		left: 54px;
		overflow: visible;

		.shop-cart-in {
			left: 6px;
			top: 6px;
			overflow: visible;

			.shop-cart-num {
				font-size: 22px;
				line-height: 30px;
				padding: 0 8px;
				border-radius: 50px;
				color: $colorF;
				background: #FE5128;
				top: 0;
				left: 60px;
				z-index: 12;
			}
		}
	}

	.btn {
		position: absolute;
		right: 23px;
		top: 25px;
		width: 220px;
		line-height: 80px;
		border-radius: 40px;
		text-align: center;
	}

	.cart-num {
		position: absolute;
		font-size: 18px;
		line-height: 20px;
		padding: 0 5px;
		border-radius: 10px;
		color: $colorF;
		@include bg-primary;
		top: -5px;
		left: 36px;
		z-index: 12;
	}

	.left-btn,
	.right-btn {
		width: 238px;
		width: 50%;
		display: inline-block;
		border-radius: 40px 0 0 40px;
		vertical-align: text-bottom;
	}

	.right-btn {
		border-radius: 0 40px 40px 0;
	}
}

.fixed-bottom-60 {
	bottom: 120px;
}

.cart-popup {
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	height: 100vh;
	width: 100vw;

	.cart-shadow {
		height: 100%;
		width: 100%;
		background: $colorOverlay;
	}

	.cart-list-box {
		position: absolute;
		background: #fff;
		width: 100%;
		left: 0;
		bottom: 130px;
		border-radius: 20px 20px 0 0;

		.cart-tle {
			background: $colorF4;
			height: 80px;
			border-radius: 20px 20px 0 0;
			padding: 0 25px;
		}

		.cart-list {
			max-height: 50vh;
			overflow: auto;
			position: relative;

			.cart-item {
				padding: 30px 0;

				.cart-spec {
					width: 200px;
				}

				.btn-input-box {
					position: relative;
					margin: 0 4px;

					.btn-input {
						position: relative;
						z-index: 1;
						height: 56px;
						width: 50px;
						line-height: 1;
						border: none;
						text-align: center;
					}
				}
			}
		}
	}
}

.unartificer {
	background: #fff;
	padding: 24px;
}

.services {
	width: 60%;
	border-radius: 12px;
}
</style>
